<template>


  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">欢迎你，{{ username }}
        <leftmenu :menu_number='2'></leftmenu>
      </div>

      
          </a-layout-sider>
                  <a-layout>
<headmenu></headmenu>
          <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '500px',
        }"
      >

<h2>修改工单类型</h2>
          <a-breadcrumb>
    <a-breadcrumb-item>工单类型</a-breadcrumb-item>
    <!-- <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item> -->
    <a-breadcrumb-item><a href="/showwork">工单类型</a></a-breadcrumb-item>
    <a-breadcrumb-item>修改工单类型</a-breadcrumb-item>
  </a-breadcrumb>
    <a-form-item label="工单类型" v-bind="formlayout">
      <a-input v-model="workname" placeholder="请输入用户名"></a-input>
    </a-form-item>

    <a-form-item
      label="工单字段"
      v-bind="formlayout"
      v-for="(item, index) in work_fields"
      :key="index"
    >
      <a-input v-model="work_fields[index]" placeholder="输入自定义字段">
      </a-input>

      <a-icon
        class="dynamic-delete-button"
        type="minus-circle-o"
        @click="work_down(index)"
      />
    </a-form-item>

    <!-- <a-icon type="plus" @click="work_up" />
      <a-icon type="minus" @click="work_down" /> -->
    <center>
      <a-button type="dashed" style="width: 40%" @click="work_up">
        <a-icon type="plus" /> Add field
      </a-button>
    </center>

   <a-form-item
      label="审批人"
      v-bind="formlayout"
    >
      <a-input v-model="approver_id" placeholder="输入自定义字段">
      </a-input>

    </a-form-item>

    <a-form-item v-bind="buttonlayout">
      <a-button type="primary" @click="updatework">添加</a-button>
    </a-form-item>

    </a-layout-content>
  </a-layout>
          </a-layout>
</template>

<script>
import { get_user, update_work } from "./axios_http/api";
// 导入组件
import leftmenu from "./leftmenu.vue";
import headmenu from './headmenu.vue';
export default {
  data() {
    return {
      username:localStorage.getItem("username"),
      collapsed: false,
        wid: this.$route.query.wid,
      child: "",
      workname: "",
      work_fields: ["", "", ""],
      approver: [],
      approver_num: [1],
      approver_id: null,
      // 表单样式
      formlayout: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
      },
      // 按钮样式
      buttonlayout: {
        // 按钮
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 16, offset: 8 },
        },
      },
    };
  },
   components: {
    leftmenu: leftmenu,
        headmenu:headmenu,
  },
  methods: {
    // 工单列表加1
    work_up() {
      this.work_fields.push("");
    },
    work_down(index) {
      if (this.work_fields.length > 1) {
        this.work_fields.splice(index, 1);
      }
    },
    updatework() {
        let data = {
            name: this.workname,
            custom: this.work_fields,
            approver: this.approver_id,
            wid: this.wid
        }
        update_work(data).then((resp) => {
            console.log(resp)
          this.$message.info(resp.data)

        })
        
    }
  },
  created() {
    get_user().then((resp) => {
      if (resp.code == 200) {
        console.log(resp);
        this.approver = resp.data;
      }
    });
  },
};
</script>